<template>
  <el-dialog :title="'正在为用户 ' + username + ' 分配角色'" :close-on-click-modal="false" :visible.sync="visible">

    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRule"
      :status-icon="true"
      label-width="130px"
      @keyup.enter.native="dataFormSubmit()"
    >

      <el-form-item label="角色列表" prop="userRoleIds">
        <el-checkbox
          v-model="checkAll"
          :indeterminate="isIndeterminate"
          @change="handleCheckAllChange"
        >全选</el-checkbox>
        <div style="margin: 15px 0;" />
        <el-checkbox-group v-model="dataForm.userRoleIds" @change="handleCheckedRolesChange">
          <el-checkbox v-for="role in allRoles" :key="role.id" :label="role.id">{{ role.roleName
          }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

  </el-dialog>
</template>
<script>
import roleApi from '@/api/system/role'
import userApi from '@/api/system/user'

export default {
  data() {
    return {
      // 是否全选
      checkAll: false,
      // 是否是不确定的
      isIndeterminate: false,
      // 是否显示弹窗
      visible: false,
      // 弹窗标题上的用户名
      username: '',
      // 所有角色列表
      allRoles: [],
      // 表单
      dataForm: {
        id: 0,
        userRoleIds: [] // 用户关联的角色id列表
      },
      dataRule: {
        userRoleIds: [
          { type: 'array', required: true, message: '请至少选择一个所属角色', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    getRolesByUserId(id, username) {
      this.dataForm.id = id
      this.username = username
      this.visible = true
      this.$nextTick(() => {
        // 重置表单
        this.$refs['dataForm'].resetFields()
        // 发送请求查询
        roleApi.getRolesByUserId(id).then(res => {
          this.dataForm.userRoleIds = res.data.userRoleIds
          this.allRoles = res.data.allRoles
        })
      })
    },
    // 全选
    handleCheckAllChange(val) { // val 当前勾选状态true/false
      // 如果当前全选, userRoleIds就是所有角色id的数组, 否则是空数组
      this.dataForm.userRoleIds = val ? this.allRoles.map(item => item.id) : []
      // 如果当前不是全选也不全不选时, 指定为false
      this.isIndeterminate = false
    },
    // 角色列表选中项发生改变的监听
    handleCheckedRolesChange(val) {
      this.checkAll = this.dataForm.userRoleIds.length === this.allRoles.length && this.allRoles.length > 0
      this.isIndeterminate = this.dataForm.userRoleIds.length > 0 && this.dataForm.userRoleIds.length < this.allRoles.length
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          userApi.assingRoles({
            'userId': this.dataForm.id,
            'userRoleIds': this.dataForm.userRoleIds
          }).then(res => {
            this.$message({
              message: '角色分配成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          })
        }
      })
    }
  }
}
</script>
